<template>
    <div>
        <div id="box">
          
            <div id="introduce">
                <div v-for="(item, index) in mainsr" :class="{ show: index === activeIndex }" :key="item.id"
                    class="referral ">
                    <h4 class="headline"> {{ item.content }}</h4>
                    <div style="font-size:0.384rem ; color: #d3d2d2; height: 1rem;"> {{ item.contents }}</div>
                </div>

            </div>

            <div id="introduces">
                <div v-for="(item, index) in mains" :class="{ show: index === activeIndex }" :key="item.id"
                    class="referral ">
                    {{ item.content }}
                </div>

            </div>

            <div id="title">
                <div v-for="(item, index) in tabs" @click="activeIndex = index">
                    <div class="details" :class="{ tinct: index === activeIndex }">
                        <div> {{ item.title }}</div>
                    </div>
                </div>
            </div>
            <div id="introduces">
                <div v-for="(item, index) in mainsc" :class="{ show: index === activeIndex }" :key="item.id"
                    class="referral ">
                    {{ item.content }}
                </div>
            </div>
            <div id="gender">

                <div v-for="(item, index) in gender" :key="item.id" @click="activeid = index"
                    :class="{ tincts: index === activeid }">
                    <div class="genders" :class="{ tinct: index === activeid }">
                        <i :class="'iconfont ' + item.sex"></i>
                    </div>
                    {{ item.name }}
                </div>

            </div>

            <div class="cut">
                <div id="introduces">
                    <div v-for="(item, index) in mainscs" :class="{ show: index === activeIndex }" :key="item.id"
                        class="referral ">
                        {{ item.content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: 0,
            activeid: 0,
            tabs: [
                { id: 1, title: 'Engliish', titles: '' },
                { id: 2, title: 'Baahasa lndonesia', titles: '' },
                { id: 3, title: 'Français', titles: '' },
                { id: 4, title: 'Portugues', titles: '' },
                { id: 5, title: 'Filipino', titles: '' },
                { id: 6, title: 'Русский', titles: '' },
                { id: 7, title: 'Espanol', titles: '' },
                { id: 8, title: 'Italian', titles: '' },
                { id: 9, title: 'Việt nam', titles: '' },
            ],
            mains: [
                { id: 1, content: "Language" },
                { id: 2, content: "Bahasa" },
                { id: 3, content: "Langue" },
                { id: 4, content: "Idioma" },
                { id: 5, content: "Language " },
                { id: 6, content: "Язык" },
                { id: 7, content: "Idioma" },
                { id: 8, content: "Lingua " },
                { id: 9, content: "Ngôn Ngu" },
            ],
            mainsc: [
                { id: 1, content: "Gender", },
                { id: 2, content: "Gender" },
                { id: 3, content: "Sexe" },
                { id: 4, content: "Gênero" },
                { id: 5, content: "Gender " },
                { id: 6, content: "Пол" },
                { id: 7, content: "Género" },
                { id: 8, content: "Genere " },
                { id: 9, content: "Giới tính" },
            ],
            mainscs: [
                { id: 1, content: "Next", },
                { id: 2, content: "Lanjut" },
                { id: 3, content: "Suivant" },
                { id: 4, content: "Próximo" },
                { id: 5, content: "Next " },
                { id: 6, content: "Следующий" },
                { id: 7, content: "Siguiente" },
                { id: 8, content: "Prossimo " },
                { id: 9, content: "Tiep" },
            ],
            mainsr: [
                { id: 1, content: " Hey, new friend", contents: 'Does the following selection meet your reading preference?' },
                { id: 2, content: "Hai, teman baru", contents: 'Apakah pilihan berikut sesuai dengan favorit baca Anda?' },
                { id: 3, content: "Salut, nouvel ami", contents: 'La sélection suivante correspond-elle à vos préférences de lecture?' },
                { id: 4, content: "Oi, novo amigo", contents: 'A seguinte seleçäo atende à sua preferência de leitura?' },
                { id: 5, content: "Hey, new friend", contents: 'Does the following selection meet your reading preference?' },
                { id: 6, content: "Привет, новый друг!", contents: 'Соответствует ли следующая подборка вашим предпочтениям в чтении?' },
                { id: 7, content: "Hola, nuevo amigo", contents: 'Las selecciones siguientes cumplen con tus preferencias de.lectura?' },
                { id: 8, content: "Ehi, nuovo amico", contents: 'La seguente selezione soddisfa le tue preferenze di lettura?' },
                { id: 9, content: "Chào ban mới", contents: 'Tùy chon bên dưới có đáp úng sở thích đoc sách của ban không?' },
            ],
            gender: [
                { name: 'Female', sex: 'icon-xingbie' },
                { name: 'Male', sex: 'icon-sex_man' },
                { name: 'Other', sex: 'icon-20xingbie' },
            ],

        }
    },
    methods:{
        onClickLeft(){
            history.back();
        }
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

#box {
    width: 100%;
}

#title {
    width: 100%;

    /* border: .0625rem solid sienna; */
    display: flex;
    flex-wrap: wrap;

}

.details {
    margin-top: .23rem;
    font-size: .25rem;
    margin-left: .29rem;
    border: .0625rem solid rgb(217, 217, 217);
    border-radius: 0.512rem;

    div {

        border-radius: 0.512rem;
        padding: 0.128rem;
    }

}

.tinct {
    background-color: #efdefa;
    border: .0625rem solid #b651ff !important;
    color: #b651ff;

}

.tincts {

    color: #b651ff;
}

.referral {
    display: none;
    padding: .625rem;
}

#introduces {
    font-size: .5rem;
}

.show {
    display: block;
}

.headline {
    height: 1.5rem;
}

#gender {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    color: #c5c5c5;
    font-size: .5rem;

    .genders {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        margin-top: .5rem;
        margin-bottom: .5rem;
        border-radius: 50%;
        border: .0625rem solid #c5c5c5;

        i {
            font-size: 0.8rem;
        }


    }
}

.cut {
    width: 80%;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b651ff;
    border-radius: 1.5rem;
    margin: 2rem auto;
    color: #fff;
}
</style>